<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    const fontName = "Times New Roman";
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineCap = 'round';

    // Parameters
    const centerX = 210;
    const centerY = 200;
    const radius = 80;
    const axisLength = radius * 1.5;
    const arrowSize = 8;
    const massDotRadius = 5;

    // --- Helper function to draw an arrowhead on a line ---
    function drawArrowhead(ctx, fromX, fromY, toX, toY, size) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - size * Math.cos(angle - Math.PI / 6), toY - size * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - size * Math.cos(angle + Math.PI / 6), toY - size * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
        ctx.restore();
    }
    
    // Translate origin to the center of the drawing area
    ctx.translate(centerX, centerY);

    // --- Draw Axes ---
    ctx.font = `italic 20px ${fontName}`;
    ctx.textAlign = 'center';
    // X-axis
    ctx.beginPath();
    ctx.moveTo(-axisLength, 0);
    ctx.lineTo(axisLength, 0);
    ctx.stroke();
    drawArrowhead(ctx, axisLength - 1, 0, axisLength, 0, arrowSize);
    ctx.fillText('x', axisLength + 15, 5);
    
    // Y-axis
    ctx.beginPath();
    ctx.moveTo(0, axisLength);
    ctx.lineTo(0, -axisLength);
    ctx.stroke();
    drawArrowhead(ctx, 0, -axisLength + 1, 0, -axisLength, arrowSize);
    ctx.fillText('y', 15, -axisLength - 10);

    // --- Draw Disk and Pivots ---
    // Circle
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
    ctx.stroke();
    
    // Pivots A and B
    ctx.font = `20px ${fontName}`;
    ctx.fillText('A', -10, radius + 20);
    ctx.fillText('B', -15, -radius - 15);

    // --- Draw Features on the Disk ---
    // Dashed line for diameter
    ctx.save();
    ctx.setLineDash([5, 3]);
    ctx.beginPath();
    ctx.moveTo(-radius, 0);
    ctx.lineTo(radius, 0);
    ctx.stroke();
    ctx.restore();
    
    // Radius R label
    const rAngle = 140 * Math.PI / 180;
    const rLineEndX = radius * Math.cos(rAngle);
    const rLineEndY = -radius * Math.sin(rAngle); // Negative for upward direction in canvas
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(rLineEndX, rLineEndY);
    ctx.stroke();
    drawArrowhead(ctx, 0, 0, rLineEndX, rLineEndY, arrowSize);
    ctx.font = `italic 20px ${fontName}`;
    ctx.fillText('R', rLineEndX/2 - 15, rLineEndY/2 - 5);

    // Point mass
    ctx.beginPath();
    ctx.arc(radius, 0, massDotRadius, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // Mass label: m = 5/4 M
    const labelX = radius + 25;
    const labelY = -55;
    ctx.textAlign = 'left';
    ctx.font = `italic 20px ${fontName}`;
    ctx.fillText('m =', labelX, labelY + 18);
    
    const fracX = labelX + 42;
    const fracY = labelY;
    ctx.textAlign = 'center';
    ctx.font = `20px ${fontName}`;
    ctx.fillText('5', fracX, fracY + 8);
    ctx.beginPath();
    ctx.moveTo(fracX - 8, fracY + 18);
    ctx.lineTo(fracX + 8, fracY + 18);
    ctx.stroke();
    ctx.fillText('4', fracX, fracY + 28);
    
    ctx.textAlign = 'left';
    ctx.font = `italic 20px ${fontName}`;
    ctx.fillText('M', fracX + 15, labelY + 18);
    
    // Connector line from label to mass
    ctx.beginPath();
    const startCurveX = labelX + 10;
    const startCurveY = labelY + 30;
    const endCurveX = radius + massDotRadius;
    const endCurveY = 0;
    ctx.moveTo(startCurveX, startCurveY);
    ctx.quadraticCurveTo(labelX, labelY + 10, endCurveX, endCurveY);
    ctx.stroke();

    // --- Draw Caption ---
    ctx.resetTransform(); // Reset transform for caption
    ctx.textAlign = 'center';
    ctx.font = `18px ${fontName}`;
    ctx.fillText('Fig. 1.109.', centerX, centerY + radius + 60);

</script>
</body>
</html>